<template>
	<z-paging ref="paging" v-model="list" @query="queryList" empty-view-text="暂无消息">
		<template #top>
			<view
				style="z-index:0;position:absolute;left:0;right:0;top:0;height:396px;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);">
			</view>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="flex center w-full fs-16"><text class="text-color-regular">消息</text></view>
			</uni-nav-bar>
			<view class="relative flex justify-end item-center mt-6 mb-10 mr-16 leading-17">
				<view class="inline-flex item-center py-10" @click="toCleanUnread">
					<image class="size-16 mr-4" src="@/center/static/svg/message/icon-clean.svg"></image>
					<text class="fs-12 text-color-hint font-normal">清除未读</text>
				</view>
			</view>
		</template>
		<view>
			<view v-for="(item,i) in list" :key="i" class="radius-8 p-12 bg-white mt-12 mx-16">
				<view class="flex justify-between item-center relative leading-22">
					<text class="fs-16 text-color-regular font-normal">{{item.msgTitle}}</text>
					<text class="fs-12 text-color-disabled font-normal">{{formatBeginTime(item.notifyTime)}}</text>
					<view v-if="item.msgState===1" class="absolute size-10 bg-primary radius-12 overflow-hidden"
						style="top:-14px;right:-14px;"></view>
				</view>
				<view class="mt-4 fs-12 font-normal" style="color:rgba(0, 0, 0, 0.60);">
					{{item.content}}
				</view>
			</view>
		</view>
		<template #bottom>
			<view :style="`height:calc(${safeAreaBottom}px);`"></view>
		</template>
	</z-paging>
</template>

/**
* 消息页
*/
<script setup name="Message">
	import {
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		unref,
		onBeforeUnmount,
		getCurrentInstance
	} from 'vue'
	import {
		formatBeginTime
	} from '@/utils/index.js'
	import {
		useMessageStore
	} from '@/stores/modules/message.js'
	onLoad((params) => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel()
	})
	const messageStore = useMessageStore()
	let getOpenerEventChannel = ref(null)
	const goBack = () => {
		if(getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/homePages/pages/home/home'
			})
			return
		}
		uni.navigateBack()
	}

	const navBar = ref(null)
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})

	const paging = ref(null)
	const list = ref([])

	const queryParams = ref({
		pageNum: 1,
		pageSize: 10
	})

	const queryList = (pageNo, pageSize) => {
		queryParams.pageNum = pageNo
		messageStore.getList(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}

	const toCleanUnread = (refresh = true) => {
		messageStore.cleanAllUnread().then(res => {
			refresh && paging.value.reload()
			getOpenerEventChannel.value.emit('reCount','refresh')
		})
	}

	onBeforeUnmount(() => {
		// 退出页面更新为已读状态
		toCleanUnread(false)
	})
</script>